DAY21 使用 Vue 3 中的第三方庫：從安裝到整合

2024 iThome 鐵人賽

DAY 21

Modern Web

VUE見我，走在時代的前端系列第 21 篇

16th鐵人賽

SHAO

團隊NUTC imac

2024-09-29 00:42:11

71 瀏覽

分享至

Vue 3 是一個功能強大的前端框架，除了其自身豐富的內建功能，還可以與大量的第三方庫整合，這讓開發者能夠輕鬆地擴展應用的功能，提升開發效率。這篇文章將介紹如何在 Vue 3 中使用第三方庫，從庫的安裝到與 Vue 的整合，並探討一些常見的實踐方法。

為什麼要使用第三方庫？

Vue 本身是一個非常靈活和強大的框架，但有時內建的功能無法完全滿足應用需求。在這種情況下，使用第三方庫可以幫助解決一些常見問題或增加新的功能，例如：

UI 組件庫：像 Element Plus、Vuetify 等可以提供現成的 UI 組件，讓開發者專注於業務邏輯，而不需要自行設計和實現每個 UI 元素。
狀態管理：如果應用規模較大，除了 Vuex 或 Pinia，還可以使用一些狀態管理的庫來處理複雜的數據流。
HTTP 客戶端：如 Axios 或 Fetch 用於更方便地進行 API 請求。
表單驗證：像 VeeValidate 等庫可以輕鬆實現表單驗證邏輯，減少手工處理的麻煩。

安裝第三方庫

使用 Vue 3 中的第三方庫，第一步是將其安裝到項目中。通常使用 npm 或 yarn 來安裝第三方庫。例如，安裝 Axios 作為 HTTP 客戶端：

npm install axios

對於 UI 組件庫，如 Element Plus，可以這樣安裝：

npm install element-plus

安裝完成後，庫將被加入到 node_modules 中，可以在項目中使用。

在 Vue 3 中整合第三方庫

引入第三方庫

首先，在你的 Vue 3 項目中引入該庫。以 Axios 為例，在 main.js 文件中引入 Axios：

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// 可以全局配置 axios 的默認 baseURL 或其他選項
app.config.globalProperties.$axios = axios;

app.mount('#app');

這樣，axios 可以在 Vue 的任何組件中通過 this.$axios 訪問。例如，在組件中調用 API：

<template>
  <div>
    <button @click="fetchData">加載數據</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

使用 UI 組件庫

整合 UI 組件庫通常需要一些額外的配置。例如，使用 Element Plus 時，我們需要在 main.js 中引入庫並註冊它：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');

這樣，Element Plus 的 UI 組件就可以在 Vue 組件中直接使用。例如，使用按鈕組件：

<template>
  <el-button type="primary">點擊我</el-button>
</template>

全局屬性與插件

Vue 3 提供了新的方式來管理第三方庫，這就是全局屬性和插件系統。全局屬性允許你將第三方庫或自定義的工具方法註冊為 Vue 應用的全局屬性，這樣在任何組件中都可以使用。

例如，將一個自定義的 API 客戶端作為全局屬性：

const app = createApp(App);

const apiClient = axios.create({
  baseURL: 'https://api.example.com'
});

app.config.globalProperties.$api = apiClient;
app.mount('#app');

這樣，你可以在組件中使用 $api 來進行 API 請求，而不需要每次都單獨引入 Axios。

使用組件中的第三方庫

除了全局整合外，有時候我們希望在特定的組件中使用第三方庫。在這種情況下，可以在需要的組件中進行局部引入。例如：

<template>
  <button @click="fetchData">加載數據</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

這種方式比較適合在少量組件中使用第三方庫，而不需要全局註冊。